<template>
    <div ref="descRef" class="omit-box" :style="{ '-webkit-line-clamp': startFlag ? endLineClamp : lineClamp }">
        <span ref="testRef" class="test-div">测</span>
        <slot name="info">
            <p v-html="info" class="text-info"></p>
        </slot>
        <span @click="onIsExtend" class="omit-out" v-if="spanFlag && isAll">收起</span>
        <div v-if="!isAll" class="omit-tag" @click="onIsExtend">
            <div class="omit-tag-bg" ></div>
            <div class="omit-tag-ct">
                全文
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, nextTick, watch, computed, onBeforeMount } from 'vue';

const props = defineProps({
    info: {
        // 文本
        type: String,
        default: ''
    },
    lineClamp: {
        type: Number,
        default: 3
    },
    lineHeight: {
        type: Number,
        default: 22
    },
    isExtend: {
        type: Boolean,
        default: true
    }
});


const startFlag = ref(true)
const spanFlag = ref(false)

const isAll = ref(true);
const endLineClamp = ref(1000);

const descRef = ref(null);
const testRef = ref(null);

// onBeforeMount(() => {
//     for (let i = 0; i < props.lineClamp - 1; i++) {
//         lineSpan.value = lineSpan.value + '1'
//     }
// })
// props.lineClamp

const onIsExtend = (e) => {
    if (!props.isExtend) {
        return
    }
    e.stopPropagation()
    isAll.value = !isAll.value
    startFlag.value = isAll.value
}

watch(
    () => props.info,
    (val) => {
        if (val) {
            setTimeout(() => {
                const pHeight = descRef.value && descRef.value.clientHeight;
                const testHeight = testRef.value && testRef.value.clientHeight;
                const endHeight = testHeight * props.lineClamp
                console.log(testHeight, '----', endHeight, '--', pHeight)
                if (3 + endHeight < pHeight) {
                    startFlag.value = false
                    spanFlag.value = true
                    isAll.value = false
                } else {
                    startFlag.value = true
                }
            }, 1);
        }
    },
    {
        immediate: true
    }
);
</script>

<style lang="scss" scoped>
.test-div {
    width: 0;
    /* height: 46px; */
    position: absolute;
    left: -50px;
}
.omit-box {
    line-height: 22px;
    overflow: hidden;
    display: -webkit-box;
    position: relative;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;
    font-size: 14px;
}
.omit-tag-bg {
    width: 47px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
}
.omit-tag-ct {
    background: #fff;
    color: #0084f6;
    font-size: 14px;
}
.omit-overflow {
    word-break: break-all;
    white-space: normal;
    /* padding:0 2em; */
    /* display: list-item; */
}
.omit-tag {
    position: absolute;
    right: 0;
    bottom: 0;
    line-height: 22px;
    display: flex;
}
.min-width {
    min-width: 47px;
}
.c-content-a {
    width: 0;
    /* height: 46px; */
    float: right;
    clear: both;
    margin-bottom: 4px;
}
.font-size-18 {
    font-size: 18px;
}
.omit-out {
    float: right;
    color: #0084f6;
    font-size: 14px;
    padding: 0 5px 0;
}
.text-info {
    display: inline;
}
</style>
